<!--
 * @Author: Wangtao
 * @Date: 2022-09-10 17:01:17
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-09-10 21:01:23
-->
<template>
  <div class="recent-calls-box .mc-call-variable">
    <div class="keyBtn" @click="onSwitch"><i class="MC_iconfont MC_icon-jianpan"></i></div>
    <div class="number-box">
      <div class="number">
        <div class="input">
          <el-input
            @keyup.enter="keyDowndialout"
            placeholder="输入号码点击回车键发起呼叫"
            v-model.trim="dialoutNumber"
          ></el-input>
        </div>
        <div class="btn" :class="dialoutNumber ? 'has-number' : ''">
          <i class="MC_iconfont MC_icon-hujiaohuojieting" @click.stop="dialout(dialoutNumber)"></i>
        </div>
      </div>
    </div>
    <div class="list" v-loading="loading">
      <div class="empty" v-if="list.length <= 0">暂无记录~</div>
      <el-scrollbar class="list-warp">
        <div class="item" v-for="(item, index) in list" :key="index" @click="dialout(item.customerNumber)">
          <div class="name">
            <i
              class="MC_iconfont"
              :class="[item.recordFileUrl ? 'MC_icon-yijieting answer' : 'MC_icon-weijieting noanswer']"
            ></i
            ><span class="customer">{{ item.customerId ? item.customerName : item.customerNumber }}</span>
          </div>
          <div class="time">{{ timestampFormat(item.startTime) }}</div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { getCdrLatest } from '@app/base/apis/call'
import { callStateModule } from '@/common/store/modules/call-state'
import { ElMessage } from 'element-plus'
import { newDate } from '@/common/utils/common'
const zeroize = (num: number) => {
  return (String(num).length === 1 ? '0' : '') + num
}
export default defineComponent({
  name: 'recentCalls',
  components: {},
  emits: ['switch'],
  // ----------------生命周期-----------------------
  setup(props, { emit }) {
    // ----------------传入属性-----------------------
    const CALLSTATE = callStateModule()
    // ----------------内部属性-----------------------
    const state = reactive({
      dialoutNumber: '',
      list: [],
      loading: false,
      dialout(dialoutNumber: any) {
        if (!dialoutNumber) {
          ElMessage.error({
            message: '请填写外呼号码',
            type: 'error'
          })
          return
        }
        CALLSTATE.dialOut(dialoutNumber)
      },
      async getList() {
        state.loading = true
        const res = await getCdrLatest({
          pageSize: 5,
          pageNumber: 1
        })
        if (res.success) {
          state.list = res.data || []
        }
        state.loading = false
      },
      timestampFormat(timestamp: string) {
        const callTimstamp = new Date(timestamp).getTime() / 1000
        const tamp: any = newDate().getTime() / 1000
        const curTimestamp = parseInt(tamp, 10) // 当前时间戳
        const timestampDiff = curTimestamp - callTimstamp // 参数时间戳与当前时间戳相差秒数

        const curDate = new Date(curTimestamp * 1000) // 当前时间日期对象
        const tmDate = new Date(callTimstamp * 1000) // 参数时间戳转换成的日期对象

        const Y = tmDate.getFullYear()
        const m = tmDate.getMonth() + 1
        const d = tmDate.getDate()
        const H = tmDate.getHours()
        const i = tmDate.getMinutes()
        if (timestampDiff < 60) {
          // 一分钟以内
          return '刚刚'
        } else if (timestampDiff < 3600) {
          // 一小时前之内
          return Math.floor(timestampDiff / 60) + '分钟前'
        } else if (curDate.getFullYear() === Y && curDate.getMonth() + 1 === m && curDate.getDate() === d) {
          return '今天' + zeroize(H) + ':' + zeroize(i)
        } else {
          const newDate1 = new Date((curTimestamp - 86400) * 1000) // 参数中的时间戳加一天转换成的日期对象
          if (newDate1.getFullYear() === Y && newDate1.getMonth() + 1 === m && newDate1.getDate() === d) {
            return '昨天' + zeroize(H) + ':' + zeroize(i)
          } else if (curDate.getFullYear() === Y) {
            return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
          } else {
            return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
          }
        }
      },
      keyDowndialout(event: any) {
        if (event.keyCode === 13) {
          state.dialout(state.dialoutNumber)
        }
      },
      onSwitch() {
        emit('switch')
      }
    })
    onMounted(() => {
      state.getList()
    })
    // ----------------计算属性-----------------------
    // ----------------监听方法-----------------------
    // ----------------调用方法-----------------------
    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="stylus" scoped>
.empty
  font-size 12px
  color rgba(0,0,0,0.88)
  text-align: center
  display: flex
  align-items: center
  justify-content: center
  position absolute
  height: 100%
  width: 100%
.recent-calls-box
  width: 100%
  background white
  padding 16px 0 16px
  box-sizing: border-box
  border-radius 8px
  position relative
  .keyBtn
    position absolute
    width 32px
    height 32px
    border-radius 50%
    background var(--mc-call-color-connect)
    color #fff
    display: flex
    justify-content: center
    align-items: center
    bottom 24px
    right 24px
    z-index 200
    i
      font-size 20px
  .number-box
    box-sizing: border-box
    padding 0 16px 0
  .number
    height: 36px
    background-color var(--mc-gray2-color)
    border-radius: 18px
    overflow: hidden
    display: flex
    align-items: center
    padding 8px 6px 8px
    box-sizing border-box
    .input
      flex 1
    .btn
      display: flex
      width 24px
      height 24px
      align-items: center
      justify-content:  center
      color white
      background-color: var(--mc-success-color)
      opacity 0.5
      border-radius: 50%
    .has-number
      opacity 1
    :deep(.el-input__wrapper)
      box-shadow none
      background-color var(--mc-gray2-color)
    :deep(.el-input__inner)
      border none
      font-size: 14px;
      text-align: center;
      box-shadow none
      background-color var(--mc-gray2-color)
  .list
    position relative
    .list-warp
      height 200px
    display: flex
    flex-direction: column
    padding-top 8px
    box-sizing: border-box
    position relative
    .item:hover
      background:  var(--mc-gray2-color)
    .item
      padding 0 16px 0
      display: flex
      justify-content: space-between
      width: 100%
      align-items: center
      padding 8px 16px 8px
      box-sizing: border-box
      .answer
        color var(--mc-call-color-connect)
      .noanswer
        color var(--mc-call-color-missed)
      .customer
        font-size: 14px
        color rgba(0, 0, 0, 0.88)
        max-width 14em
        text-overflow ellipsis
        white-space nowrap
        display inline-block
        overflow hidden
      .MC_iconfont
        font-size: 16px
        margin-right: 8px
      .time
        color rgba(0, 0, 0, 0.38)
</style>
